<script lang="ts" setup>
import { ref } from 'vue';
import { useLocale } from '@/locale/locale';

withDefaults(
  defineProps<{
    title?: string;
    titlePosition?: string;
    showConfirmBtn?: boolean;
    confirmText?: string;
    showCancelBtn?: boolean;
    cancelText?: string;
    disabled?: boolean;
    height?: string;
    background?: string;
    bodyStyle?: Record<string, any>;
  }>(),
  {
    background: '#fff',
    titlePosition: 'center',
    showConfirmBtn: true,
    showCancelBtn: false
  }
);

const emit = defineEmits<{
  close: [];
  confirm: [];
  cancel: [];
}>();

const { t } = useLocale();
const popupRef = ref();

function close() {
  popupRef.value?.close();
  emit('close');
}

defineExpose({
  open: () => popupRef.value?.open('bottom'),
  close: () => close()
});

const handleMaskClick = () => {
  emit('close');
};
</script>

<template>
  <uni-popup ref="popupRef" :safe-area="false" type="bottom" @mask-click="handleMaskClick">
    <view
      :style="{
        height: height ? height : 'auto',
        background: background ? background : 'none'
      }"
      class="apt-popup-scroll"
    >
      <view :style="background ? { background } : {}" class="apt-popup">
        <view :class="titlePosition == 'center' ? 'apt-popup__head' : 'apt-popup__head-left'">
          <text class="text-xl text-primary font-medium">{{ title }}</text>
          <view class="apt-popup__close-btn" @click.stop="close">
            <image class="w-full h-full" src="/static/icon_close.png" />
          </view>
        </view>
        <scroll-view
          :style="{
            height: height ? 'calc('+height+' - 72rpx - 25px)' : 'auto',
          }"
          scroll-y
        >
          <view :style="bodyStyle" class="apt-popup__body">
            <slot></slot>
          </view>
          <slot name="footer">
            <view v-if="showConfirmBtn || showCancelBtn" class="apt-popup__foot">
              <view
                v-if="showCancelBtn"
                class="apt-popup__btn apt-popup__cancel-btn"
                @click.stop="$emit('cancel')"
              >
                {{ cancelText }}
              </view>
              <view
                v-if="showConfirmBtn"
                :class="{ 'is-disabled': disabled }"
                :disabled="disabled"
                class="apt-popup__btn apt-popup__confirm-btn"
                @click.stop="$emit('confirm')"
              >
                {{ confirmText || t('LLKey_loginCheckConfirm') }}
              </view>
            </view>
          </slot>
          <apt-safe-area />
        </scroll-view>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss">
.apt-popup-scroll {
  border-top-left-radius: 28rpx;
  border-top-right-radius: 28rpx;
}

.apt-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  border-top-left-radius: 28rpx;
  border-top-right-radius: 28rpx;

  &__head {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 28rpx;
    padding-top: 44rpx;
  }

  &__head-left {
    position: relative;
    display: flex;
    margin-bottom: 28rpx;
    padding-top: 44rpx;
    padding-left: 26rpx;
  }

  &__close-btn {
    position: absolute;
    top: 56rpx;
    right: 26rpx;
    width: 28rpx;
    height: 28rpx;
  }

  &__body {
    flex: 1;
    padding: 0 24rpx;
  }

  &__foot {
    display: flex;
    align-items: center;
    padding: 8rpx 24rpx 4rpx;
  }

  &__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 76rpx;
    border: 1rpx solid transparent;
    border-radius: 9999rpx;
    font-weight: 500;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #fff;

    & + & {
      margin-left: 22rpx;
    }
  }

  &__confirm-btn {
    background-color: #269c74;
    border-color: #269c74;

    &.is-disabled {
      background-color: #d8d8d8;
      border-color: #d8d8d8;
      color: #fff;
    }
  }

  &__cancel-btn {
    border-color: #c4c4c4;
    color: #3d3d3d;
  }
}
</style>
